<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>展览</title>
<link href="../style/common.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.exhibition_cover{width: 210px;height: 280px;background:no-repeat left center;}
.exhibition_cover a{display:block;width: 210px;height: 280px;}

.exhibition_small_item {float: left; width: 84px; height: 117px;}
.exhibition_small_cover{position:relative;width: 84px;height: 117px;background: no-repeat center center;}
.exhibition_small_cover a{display:block;width: 84px;height: 117px;}
.currentState{position: absolute;top: 0px;left: -2px}

#allExhibition{text-align: left;width: 960px;margin: 0 auto;border:1px solid #cccccc;margin-top: 10px;background: #fff}
.row   {clear:both;padding-left: 24px;}	
.row:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.list {float: left;padding-right: 21px;padding-bottom: 20px;}
.description{float: left;width:204px;height: 117px;font-family: "宋体";font-size: 12px;line-height: 20px;}
</style>

<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>

<script type="text/javascript">

	//显示展览详情
	function showExhibitionDetail(){
		var exhibition_id = $("#exhibitionselect").val() ;
		if( exhibition_id != ""){
			var action_url = "${ctx }/front/exhibitionAction!findById.do?id="+exhibition_id;
	
			$.ajax({
				type:'POST',
				url:action_url,
				async : false, //ajax同步
				success: function(data){
					var exhibition = eval('('+data+')');
					$("#title").html(exhibition.title);
					$("#description").html(exhibition.description);
					$("#artists").html(exhibition.artists);
					$("#totalCount").html(exhibition.totalCount);
					$("#beginTime").html(exhibition.beginTime);
					$("#endTime").html(exhibition.endTime);
					$("#publisher").html(exhibition.publisher);
					var imagepath = '${img_server }/exhibition/'+exhibition.imageid+'_m_b.'+exhibition.suffix;
					$("#exhibitionImage").css("background-image",'url('+imagepath+')');
					var linkUrl = "${ctx }/front/exhibitionAction!exhibitionDetail.do?id="+exhibition.id;
					$("#exhibitionLink1").attr("href",linkUrl);
					$("#exhibitionLink2").attr("href",linkUrl);
				}
			});
		}
	}

</script>
</head>

<body>

<%@include file="/commons/head.jsp"%>

<table width="960" align="center" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid #ccc;padding: 0px 0px 20px 24px;background: #fff">
          <tr>
            <td width="210" class="captionTitle" style="padding:10px 0px 5px 24px;">网上策展（${exhibition.publisher }特邀）</td>
            <td width="702" align="right" style="padding:10px 24px 5px 0px;">
	             <select  name="exhibitionselect" id="exhibitionselect" onchange="showExhibitionDetail()" class="selectStyle">
	             	<option value="">-------------- 历期展览 --------------</option>
			      	<c:forEach items="${exhibitionList}" var="exhibition">
						<option value="${exhibition.id }">${exhibition.title }</option>
					</c:forEach>
			     </select>
            </td>
          </tr>
          <tr>
            <td  width="210" height="280" valign="top">
	    		<div id="exhibitionImage" style="background-image: url('${img_server }/exhibition/${exhibition.imageInfo.id}_m_b.${exhibition.imageInfo.suffix}');" class="exhibition_cover">
				          	<a id="exhibitionLink1" href="${ctx }/front/exhibitionAction!exhibitionDetail.do?id=${exhibition.id }"></a>
				</div>
            </td>
            <td valign="top"><table width="702" border="0" cellspacing="0" cellpadding="0" height="280">
              <tr>
                <td class="bt14A"><span class="style17" id="title">${exhibition.title }</span></td>
              </tr>
              <tr>
                <td class="nw12c">序言：<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;<span id="description" class="nw12c">${exhibition.description }</span></td>
              </tr>
              <tr>
                <td height="107" valign="bottom" class="nw12c">艺术家：<span class="nw12c" id="artists">${exhibition.artists }</span><br>
						展览作品:<span class="nw12c" id="totalCount">${exhibition.totalCount }</span>幅<br>
						展览时间：<span class="nw12c" id="beginTime"><fmt:formatDate value='${exhibition.beginTime }' pattern='yyyy年MM月dd日'/></span>-<span class="nw12c" id="endTime"><fmt:formatDate value='${exhibition.endTime }' pattern='yyyy年MM月dd日'/></span><br>
						主办单位:<span class="nw12c" id="publisher">${exhibition.publisher }</span>
				</td>
              </tr>
              <tr>
                <td valign="bottom" style="padding-right: 28px;"><a id="exhibitionLink2" href="${ctx }/front/exhibitionAction!exhibitionDetail.do?id=${exhibition.id }">
                	<img src="../images/an1.gif" width="114" height="31" border="0" align="right"></a></td>
              </tr>
            </table></td>
          </tr>
 </table>

<div id="allExhibition">
	<div class="captionTitle" style="padding: 8px 0px 8px 24px;">主要城市展览信息</div>
	<c:forEach items="${page.result}" var="result" varStatus="status">
         	<c:if test="${ status.count mod 3 == 1}"><div class="row"></c:if>
         	<div class="list">
         		<div class="exhibition_small_item">
			      	<div style="background-image: url('${img_server }/exhibition/${result.imageInfo.id }_s.${result.imageInfo.suffix }');" class="exhibition_small_cover">
	                  	<a href="${ctx }/front/exhibitionAction!exhibitionDetail.do?id=${result.id }"></a>
	                  	<div class="currentState">
							<c:if test="${result.currentStateFlag == 1}"><img src="../images/tstb7.png" width="44" height="24">​​</c:if>
							<c:if test="${result.currentStateFlag == 2}"><img src="../images/tstb5.png" width="53" height="24"></c:if>
							<c:if test="${result.currentStateFlag == 3}"><img src="../images/tstb6.png" width="44" height="24"></c:if>
						</div>
	                </div>
          		</div>
			     <div class="description">
			     	<div style="width: 197px;position: relative;height: 117px;padding-left: 7px;">
			     		${result.cityInfo.name }<br>
						<a href="${ctx }/front/exhibitionAction!exhibitionDetail.do?id=${result.id }">${result.title }</a><br>
						展览时间：<fmt:formatDate value='${result.beginTime }' pattern='yyyy年MM月dd日'/><br>
						展览地点：${result.address }<br>
						主办单位：${result.publisher }
					</div>
			    </div>
			  </div>
        	<c:if test="${ status.last or  status.count mod 3 == 0}"></div></c:if>
      </c:forEach>
</div>

<%@include file="/commons/foot.jsp" %>

</body>
</html>